<template>
  <div class="tabs">
    <div>
      <ul class="tabWrapper">
        <li v-for="(item, index) in menu"
          :key="index"
          :class="{
            [item.comp]: item.num,
            active: isActive == item.num ? true : false,
          }"
          @click="clickTab(item)">
          <template v-if="isActive == item.num">
            <icon-park :type="item.type"
              theme="outline"
              size="16"
              fill="#3A58B9"
              :strokeWidth="2" />
          </template>
          <template v-else>
            <icon-park :type="item.type"
              theme="outline"
              size="16"
              fill="#8691A3"
              :strokeWidth="2" />
          </template>
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="tabBody"
      v-show="isShow">
      <div :is="currentComp"
        @layoutName="layoutName"></div>
    </div>
  </div>
</template>
<script>
import { IconPark } from '@icon-park/vue/es/all'
import selInput from '../position/input.vue'
import layout from '../position/layout.vue'
import refresh from '../position/refresh.vue'
export default {
  components: {
    IconPark,
    // location,
    selInput,
    layout,
    refresh
  },
  data() {
    return {
      // 当前选中的组件
      // currentComp: 'location',
      currentComp: 'selInput',
      // 当前选中的li标签
      isActive: '1',
      menu: [
        {
          // li标签的内容
          name: '定位',
          // 当前li标签是否选中的标识
          num: '1',
          // 点击当前li标签，要显示的组件
          // comp: 'location',
          comp: 'selInput',
          // 图标主题
          type: 'aiming'
        },
        {
          name: '静态布局',
          num: '2',
          comp: 'layout',
          type: 'copy'
        },
        {
          name: '重新布局',
          num: '3',
          comp: 'refresh',
          type: 'refresh'
        }
      ],
      isShow: false
    }
  },
  methods: {
    clickTab(params) {
      this.isActive = params.num
      if (this.currentComp === params.comp) {
        this.isShow = !this.isShow
      } else {
        this.isShow = true
      }
      this.currentComp = params.comp
      if (params.name == '重新布局') {
        this.$eventBus.$emit('refreshLayout')
      }
    },
    layoutName(val) {
      console.log('layoutName', val)
      this.menu.forEach(item => {
        if (item.num == 2) {
          item.name = val.type
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tabs {
  width: 330px;
  box-shadow: 0px 4px 4px 4px rgba(172, 176, 191, 0.14);
  border-radius: 2px;
}

// 样式
.tabWrapper {
  overflow: hidden;
  width: 330px;
  display: flex;
  align-items: center;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  border-radius: 4px;
  /deep/ .i-icon {
    vertical-align: middle;
  }
  li {
    list-style: none;
    float: left;
    margin-left: 20px;
    font-size: 14px;
    margin: 0;
    text-align: center;
    height: 20px;
    line-height: 20px;
    color: #333333;
    cursor: pointer;
  }

  li.selInput {
    flex-grow: 2;
    border-right: 1px solid #f2f2f2;
  }

  li.layout {
    flex-grow: 3;
    border-right: 1px solid #f2f2f2;
  }

  li.refresh {
    flex-grow: 3;
  }

  li.active {
    font-size: 14px;
    color: #3a58b9;
  }
}

.tabBody {
  width: 350px;
  background: #fff;
  overflow: hidden;
  border-radius: 4px;
}
</style>
